// import React from 'react';
// import { Navigate, useNavigate } from 'react-router-dom';
// import { 
//   FiTrendingUp, FiPieChart, FiBarChart2, FiDollarSign, 
//   FiShield, FiLock, FiSettings, FiDatabase, 
//   FiCode, FiCpu, FiAward, FiActivity 
// } from 'react-icons/fi';

// const Sidebar = ({ visible, activePage, onNavClick }) => {
//   const navigate = useNavigate(); // 添加 useNavigate 钩子
  
//   const handleSubItemClick = (subItemId) => {
//     // 根据一级页面和二级选项导航到具体路由
//     switch(activePage) {
//       case 'market':
//         navigate(`/market/${subItemId}`);
//         break;
//       case 'strategy':
//         navigate(`/strategy/${subItemId}`);
//         break;
//       case 'training':
//         navigate(`/training/${subItemId}`);
//         break;
//       default:
//         navigate('/');
//     }
//   };
// //根据不同的activePage生成不同的子选项
//   const getSubItems = () => {
//     switch (activePage) {
//       case 'market':
//         return [
//           { id: 'trend', label: '市场趋势', icon: <FiTrendingUp /> },
//           { id: 'sector', label: '行业分析', icon: <FiPieChart /> },
//           { id: 'comparison', label: '对标分析', icon: <FiBarChart2 /> },
//           { id: 'valuation', label: '估值模型', icon: <FiDollarSign /> }
//         ];
//       case 'strategy':
//         return [
//           { id: 'portfolio', label: '投资组合', icon: <FiShield /> },
//           { id: 'risk', label: '风险管理', icon: <FiLock /> },
//           { id: 'optimization', label: '策略优化', icon: <FiSettings /> },
//           { id: 'backtest', label: '回测结果', icon: <FiDatabase /> }
//         ];
//       case 'training':
//         return [
//           { id: 'algorithm', label: '算法选择', icon: <FiCode /> },
//           { id: 'parameters', label: '参数调优', icon: <FiCpu /> },
//           { id: 'validation', label: '模型验证', icon: <FiAward /> },
//           { id: 'performance', label: '表现分析', icon: <FiActivity /> }
//         ];
//       default:
//         return [];
//     }
//   };

//   if (!visible) return null;

//   return (
//     <aside className="sidebar">
//       <div className="sidebar-header">
//         <h3>
//           {activePage === 'market' && '市场分析'}
//           {activePage === 'strategy' && '持仓策略'}
//           {activePage === 'training' && '模型训练'}
//         </h3>
//       </div>
      
//       <nav className="sidebar-nav">
//         {getSubItems().map(item => (
//           <button 
//             key={item.id}
//             className="sidebar-item"
//             onClick={() => handleSubItemClick(item.id)}
//           >
//             <span className="sidebar-icon">{item.icon}</span>
//             <span className="sidebar-label">{item.label}</span>
//           </button>
//         ))}
//       </nav>
      
//       <div className="sidebar-footer">
//         <div className="status-indicator">
//           <div className="status-dot connected"></div>
//           <span>数据库已连接</span>
//         </div>
//         <div className="status-indicator">
//           <div className="status-dot active"></div>
//           <span>实时数据更新</span>
//         </div>
//       </div>
//     </aside>
//   );
// };

// export default Sidebar;

import React from 'react';
import { 
  FiTrendingUp, FiPieChart, FiBarChart2, FiDollarSign, 
  FiShield, FiLock, FiSettings, FiDatabase, 
  FiCode, FiCpu, FiAward, FiActivity 
} from 'react-icons/fi';

const Sidebar = ({ visible, activePage, onNavClick }) => {
  const handleSubItemClick = (subItemId) => {
    if (onNavClick) {
      onNavClick(activePage, subItemId);
    }
  };

  const getSubItems = () => {
    switch (activePage) {
      case 'market':
        return [
          { id: 'trend', label: '市场趋势', icon: <FiTrendingUp /> },
          { id: 'sector', label: '行业分析', icon: <FiPieChart /> },
          { id: 'comparison', label: '对标分析', icon: <FiBarChart2 /> },
          { id: 'valuation', label: '估值模型', icon: <FiDollarSign /> }
        ];
      case 'strategy':
        return [
          { id: 'portfolio', label: '投资组合', icon: <FiShield /> },
          { id: 'risk', label: '风险管理', icon: <FiLock /> },
          { id: 'optimization', label: '策略优化', icon: <FiSettings /> },
          { id: 'backtest', label: '回测结果', icon: <FiDatabase /> }
        ];
      case 'training':
        return [
          { id: 'algorithm', label: '算法选择', icon: <FiCode /> },
          { id: 'parameters', label: '参数调优', icon: <FiCpu /> },
          { id: 'validation', label: '模型验证', icon: <FiAward /> },
          { id: 'performance', label: '表现分析', icon: <FiActivity /> }
        ];
      default:
        return [];
    }
  };

  if (!visible) return null;

  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <h3>
          {activePage === 'market' && '市场分析'}
          {activePage === 'strategy' && '持仓策略'}
          {activePage === 'training' && '模型训练'}
        </h3>
      </div>
      
      <nav className="sidebar-nav">
        {getSubItems().map(item => (
          <button 
            key={item.id}
            className="sidebar-item"
            onClick={() => handleSubItemClick(item.id)}
          >
            <span className="sidebar-icon">{item.icon}</span>
            <span className="sidebar-label">{item.label}</span>
          </button>
        ))}
      </nav>
      
      <div className="sidebar-footer">
        <div className="status-indicator">
          <div className="status-dot connected"></div>
          <span>数据库已连接</span>
        </div>
        <div className="status-indicator">
          <div className="status-dot active"></div>
          <span>实时数据更新</span>
        </div>
      </div>
    </aside>
  );
};

export default Sidebar;